<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <script type="text/javascript" src="https://v2.cn.vuejs.org/js/vue.js"></script>
</head>

<body>
  <div id="root">{{txt}}</div>
  <h1>梁子璇</h1>

  <video id="local_camera" autoplay playsinline controls></video>
  <button id="showVideo">打开摄像头</button>

  <form action="websocketChatroom.html">
    <label><b>登录名</b></label><br>
    <input type="text" id="uname"><br>
    <label for="userpwd1"><b>密码</b></label><br />
    <input typw="text" id="pwd">
    <button type="submit" id="sub">登录</button>
  </form>

  <button onclick="showImage()">查看图片</button>


  <script type="text/javascript">
    Vue.config.productionTip = false; //以阻止 vue 在启动时生成生产提示
    console.log(Vue.config.productionTip);
    var vue = new Vue({
      el: "#root",
      data: {
        txt: "尚硅谷",
      },
    });

    function showImage() {
      var img = document.createElement('img');
      img.src = 'images/image.jpg';
      img.alt = '图片';
      document.body.appendChild(img);
}

    let constraints = {
      audio: false,
      video: { width: 400, height: 400 },
    };

    function openCamera() {
      console.log("open camera");
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then((stream) => {
          const video = document.querySelector("#local_camera");
          video.srcObject = stream;
        })
        .catch(null);
    }
    document
      .querySelector("#showVideo")
      .addEventListener("click", openCamera);


    let userinfo = {
      uname: null,
      pwd: null
    }

    document
      .querySelector("#sub")
      .addEventListener("click", () => {
        userinfo.uname = document.getElementById("uname").value
        userinfo.pwd = document.getElementById("pwd").value
        console.log(userinfo);
        document.cookie = "uname="+userinfo.uname;
        document.cookie = "pwd="+userinfo.pwd;
      });


  </script>
</body>

</html>